<template>
    <div class="get-red-alert">
        <div class="positionR">
            <transition-group name="redPackget" enter-active-class="animated zoomIn"
                leave-active-class="animated zoomOut">
                <!-- 未领取的红包显示 -->
                <div key="box1" class="get-red-packeget" ref="refRedShow" :class="{'get-red-hide':isHideRed}"
                    v-show="this.receiveRed == 0">
                    <div class="red-bg-img">
                        <p class="red_title">{{title}}</p>
                        <div class="red-bg-rds"></div>
                        <div class="person-number-wwrap">
                            <div class="person-number-cwrap">
                            </div>
                        </div>
                        <div class="red-wradius">
                            <div class="red-radius"></div>
                        </div>
                    </div>
                    <div class="red-bottom-part"
                        @click="showbox({welPacketId:redData.welPacketId,welPacketType:getRedMsg.redTypeState})">
                        <div class="red-big-btn"
                            :class="{'disabled':!getRedMsg.myPacketInfo.canReceive,'active':getBtnActive}">
                            <p class="bigFont">领</p>
                        </div>
                    </div>
                    <div class="prompt">领取即默认关注商家</div>
                    <span class="iconfont icon-close close" @click="closeTemplate"></span>
                </div>
                <!-- 领取后的红包显示 -->
                <div key="box2" class="get-red-packeget" ref="refRedShow" :class="{'get-red-hide':isHideRed}"
                    v-show="this.receiveRed == 1">
                    <div class="red-bg-img receive">
                        <div class="text-box">
                            <div class="text-box-shang"
                                v-if="redData && redData.receivedFinish == false && redData.received == false">
                                <p>{{redData.title}}</p>
                                <p>{{redData.receivedAmount}}<span>元</span></p>
                                <!-- <p>已存入微信钱包</p> -->
                                <p>已存入微信钱包，请查收！</p>
                            </div>
                            <!-- 当红包领取完的时候显示 -->
                            <div class="text-box-shang" v-if="redData && redData.receivedFinish">
                                <p>{{redData.title}}</p>
                                <p class="big-text">手慢了，红包被领完了</p>
                                <p></p>
                            </div>
                            <!-- 当红包领取过的时候显示 -->
                            <div class="text-box-shang"
                                v-if="redData && redData.receivedFinish == false && redData.received == true">
                                <p>{{redData.title}}</p>
                                <p class="big-text">您已经领取过该红包了</p>
                                <p>已存入微信钱包，请查收！</p>
                            </div>
                            <div class="text-box-xia"
                                v-if="redData && Array.isArray(redData.luckyReceiveModels) && redData.luckyReceiveModels.length > 0 && redData.receivedFinish == false && redData.received == false">
                                <div class="user-box">
                                    <div class="user">
                                        <img :src="redData.luckyReceiveModels[0].photoUrl" alt="">
                                    </div>
                                    <div class="user-name">
                                        <p>{{redData.luckyReceiveModels[0].userName}}</p>
                                        <p>{{getTime(redData.luckyReceiveModels[0].gmtCreated,'yy-MM-dd hh:mm:ss')}}</p>
                                        <!-- <p>{{getTime(redData.luckyReceiveModels[0].gmtCreated,'hh:mm')}}</p> -->
                                    </div>
                                </div>
                                <div>{{redData.luckyReceiveModels[0].amount}}元</div>
                            </div>
                        </div>
                    </div>
                    <div class="red-bottom-part-receive">
                        <div class="coupon" v-if="redData && redData.hasTicket">
                            <div class="coupon-box" v-for="(item,index) in redData.templateTickets" :key="index"
                                @click="handleCoupons(item)">
                                <div class="icon-status">
                                    <img v-if="item.state == 6"
                                        src="../../../assets/images/redEnvelope/icon-status1.png" alt="">
                                    <img v-else-if="item.state == 5"
                                        src="../../../assets/images/redEnvelope/icon-status2.png" alt="">
                                </div>
                                <div class="icon">
                                    <img :src="item.logo" alt="" style="width:100%">
                                </div>
                                <div class="text1">
                                    <p v-show="item.type != 4" :class="{'coupons-code-active': item.state != '0'}">
                                        满{{item.condition.consumePrice}}</p>
                                    <p v-show="item.type == 4" :class="{'coupons-code-active': item.state != '0'}">
                                        {{item.condition.consumePrice}}</p>
                                    <p :class="{'coupons-code-active': item.state != '0'}">
                                        {{getTime(item.startTime,'MM.dd')}}-{{getTime(item.endTime,'MM.dd')}}</p>
                                </div>
                                <div class="text2">
                                    <p :class="{'coupons-code-active': item.state != '0'}" v-if="item.type==3">
                                        <span>享</span> {{Math.floor(item.condition.discount * 10) / 10}}折</p>
                                    <p :class="{'coupons-code-active': item.state != '0'}" v-if="item.type==1">
                                        <span>减</span> {{item.condition.cashPrice}}</p>
                                    <p :class="{'coupons-code-active': item.state != '0'}" v-if="item.type==4">
                                        <span>增</span> {{item.condition.cashPrice}}</p>
                                    <p :class="{'coupons-code-active': item.state != '0'}">{{item.scope}}</p>
                                </div>
                                <div :class="{'but':true, 'coupons-code-active': item.state != '0'}">
                                    <span>立</span>
                                    <span>即</span>
                                    <span>领</span>
                                    <span>取</span>
                                </div>
                            </div>
                        </div>
                        <div class="prompt prompt-receive">领取即默认关注商家</div>
                        <span class="iconfont icon-close close" @click="closeTemplate"></span>

                        <div class="red-wclock"
                            v-if="getRedMsg.redTypeState === 1 && getRedMsg.myPacketInfo && getRedMsg.myPacketInfo.lastTimeMillis > 0">
                            <img class="red-clock" :src="staticImageUrl('/images/red_clock.png')" alt="">
                            <span>{{surplusTime.day}}:{{surplusTime.hour1}}:{{surplusTime.minute}}</span>
                        </div>
                    </div>
                </div>
            </transition-group>
            <v-bord v-show="showBord">
                <div @click="clickBord" slot="cantClick" class="com_black"></div>
            </v-bord>
        </div>
    </div>
</template>

<script>
import XLocation from "../../../x/XLocation";
import XThirdLogin from '../../../x/XThirdLogin'
import { MessageBox, Toast } from "mint-ui";
import { mapState, mapGetters } from 'vuex'
export default {
    props: {
        headerProp: Object,
    },
    name: "NewRedAlert",
    //   props: {
    //     title: {
    //       type: String,
    //       default: {
    //         title: "恭喜"
    //       }
    //     }
    //   },
    data () {
        return {
            ban: false, //防止用户多次点击,点击两秒过后才能再次点击
            thirdId: null,
            userId: null,
            title: "",
            param: null,
            headerMsg: {}, //判断是否已经关注
            couponsCode: "", //优惠卷状态,6表示已经领取
            redTitle: {},
            redData: {}, //红包数据
            receiveRed: -1, //领取红包 1表示点击领取 0表示未点击领取
            redShow: false,
            isHideRed: false,
            openRedShow: false,
            showBord: true,
            money: 0,
            surplusTimer: "",
            surplusTime: "",
            getBtnActive: false,
            goldIcon: false,
            goldIconActive: [
                { isShow: false },
                { isShow: false },
                { isShow: false }
            ],
            getRedMsg: {
                notNeedAction: false,
                title: "恭喜发财，大吉大利",
                redTypeState: 1, //红包种类//0、普通红包，1、加速红包，2、增长红包
                rule: [], //红包领取规则
                myPacketInfo: {
                    receivedAmount: 0, //已领金额
                    welPacketId: 0, //红包ID
                    completeReceived: false, //
                    showReceivedAmount: false, //是否显示已领金额
                    canReceive: false, //是否领取按钮可点击
                    canReceiveAmount: 0, //可领金额（普通红包不显示）
                    lastTimeMillis: 0, //剩余时间毫秒数（助力红包才有用）
                    invitedNum: 0, //已经邀约人数
                    waitInvitedNum: 0, //待邀请人数（助力红包才有用）
                    packetHelpers: [
                        {
                            userId: "", //帮助者用户id
                            photo: "", //帮助者头像
                            amount: "" //帮助者账号
                        }
                    ]
                }
            }
        };
    },
    mounted () {
        this.headerMsg = Object.assign({}, this.headerMsg, this.headerProp);
        this.title = this.$store.state.redEnvelopeData ? this.$store.state.redEnvelopeData.title : this.$store.state.redEnvelopeList[0].title;
        this.receiveRed = 0;
    },
    methods: {
        // 领取红包
        async showbox () {
            if (this.ban) {
                console.log('禁止点击');
                return false;
            }
            this.ban = true; //防止用户多次点击
            this.thirdId = this.currentThird && this.currentThird.thirdId ? this.currentThird.thirdId : 0;
            this.userId = this.currentUser && this.currentUser.userId ? this.currentUser.userId : 0;
            if (!this.thirdId || this.thirdId == 0) {
                console.log('授权微信登录');
                XThirdLogin.toLogin();
                this.thirdId = this.currentThird && this.currentThird.thirdId ? this.currentThird.thirdId : 0;
            }
            this.param = this.$store.state.redEnvelopeData ? this.$store.state.redEnvelopeData : this.$store.state.redEnvelopeList[0];

            let distance = this.param.joinScope == 0 ? false : XLocation.isOutDistance(this.param.joinScope) //红包可领取范围 ，如果后台返回0就不设置范围领取，直接可以领取。
            if (distance) {
                MessageBox({
                    title: "无法领取",
                    message: `商家只发放给${this.param.joinScope}km内的用户`,
                    confirmButtonText: "知道了"
                }).then(action => {
                    this.closeTemplate();
                    this.ban = false;
                });
                return;
            }
            this.getBtnActive = true;
            await this.getRedData();
            setTimeout(() => {
                this.ban = false;
            }, 2000);
            // this.redData.received = true;
        },
        // 请求红包接口
        getRedData () {
            let thirdId = this.currentThird && this.currentThird.thirdId ? this.currentThird.thirdId : 0;
            let userId = this.currentUser && this.currentUser.userId ? this.currentUser.userId : 0;
            if (window.location.href.indexOf('https://haokanhaowan') == -1) {
                thirdId = 0
            }
            console.log(this.thirdId, "thirdId");
            console.log(this.userId, "userId");
            if (this.thirdId == "0" && this.userId == "0") {
                this.$router.push("/to/login");
                return;
            }
            let redParams = {
                userId,
                thirdId,
                storeId: this.$route.query.storeId,
                welPacketId: this.param.welPacketId,
                promotionId: this.param.promotionId,
                terminalType: '6'
            }
            this.$store.dispatch('getRedDataApi', redParams).then((data) => {
                if (data.success) {
                    this.redData = data.result;
                    setTimeout(() => {
                        this.receiveRed = 1;
                    }, 1000);
                    // 是否已关注，未关注领取红包后默认关注
                    if (!this.headerMsg.belongStoreInfo.concerned) {
                        let params = {
                            concernType: '1',
                            concernKey: this.$route.query.storeId,
                            like: 'do'
                        }
                        this.$store.dispatch('doAttentionApi', params).then((data) => {
                            if (data.success) {
                                this.$store.commit("setConcerned", true);
                                console.log("关注成功");
                            } else {
                                console.log("关注失败");
                            }
                        })
                    }
                } else if (data.errMsg) {
                    this.$root.$emit('toast', { msg: data.errMsg });
                } else {
                    this.$root.$emit('toast', { msg: '领取红包失败' });
                }
            })
        },
        // 点击领取优惠卷
        handleCoupons (item) {
            if (this.userId == '0') {
                Toast('请登录账户')
                setTimeout(() => {
                    this.$router.push("/to/login");
                }, 2000);
                return
            }
            if (item.state == '0') {
                this.$store.dispatch('getAllCounponsFnApi', item.templateTicketId).then((data) => {
                    if (data.success) {
                        this.couponsCode = data.result;
                        item.state = data.result;
                    }
                })
            }
        },

        closeTemplate () {
            // 关闭红包窗口
            this.receiveRed = -1;
            this.showBord = false;
            setTimeout(() => {
                this.$store.commit("setredAlert", this.showBord);
            }, 100);
        },
        clickBord () {
            // if (this.isHideRed) {
            //   this.isHideRed = false;
            //   this.redShow = true;
            // }
        }
    },
    components: {
        "v-bord": () =>
            import("../../../components/commonComponents/alert/Bord")
    },
    computed: {
        ...mapGetters({
            currentStore: 'currentStoreFn',
        }),
        currentUser () {
            return this.$store.getters.currentUserFn;
        },
        currentThird () {
            return this.$store.getters.currentThirdFn;
        }
    },
    watch: {
        getRedProps: function (val) {
            this.getRedMsg = Object.assign({}, this.getRedMsg, val);
        }
    }
};
</script>

<style scoped lang="scss">
.get-red-alert {
    top: 0%;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0;
    margin: auto;
    position: absolute;
    .prompt {
        color: #f5e193;
        font-size: 0.12rem;
        position: absolute;
        left: 50%;
        margin-left: -0.54rem;
        bottom: 0.2rem;
    }
    .prompt-receive {
        position: absolute;
        left: 50%;
        margin-left: -0.54rem;
        bottom: 0.2rem;
    }
}
.get-red-packeget {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 3.2rem;
    height: 4.6rem;
    z-index: 1060;
    -webkit-border-radius: 0.07rem;
    -moz-border-radius: 0.07rem;
    border-radius: 0.07rem;
    background-color: #de4d46;
}
.red-bg-img {
    padding-top: 0.4rem;
    background-color: #e95149;
    height: 3.48rem;
    position: relative;
    border-top-left-radius: 0.07rem;
    border-top-right-radius: 0.07rem;
    .text-box {
        width: 2.8rem;
        height: 2.8rem;
        background: #f56c62;
        position: absolute;
        transform: translate(7%, -25%);
        border-radius: 12px;
        // z-index: 2;
        .text-box-shang {
            color: #f5e193;
            .big-text {
                margin-top: 0.2rem;
                font-size: 0.24rem !important;
            }
            p {
                display: flex;
                justify-content: center;
                align-items: center;
                &:nth-child(1) {
                    font-size: 0.16rem;
                    padding: 0.35rem 0;
                }
                &:nth-child(2) {
                    font-size: 0.6rem;
                    // font-size: 0.24rem;
                    align-items: flex-end;
                    span {
                        margin-bottom: 0.12rem;
                        font-size: 0.14rem;
                    }
                }
                &:nth-child(3) {
                    margin-top: 0.2rem;
                    font-size: 0.18rem;
                }
            }
        }
        .text-box-xia {
            display: flex;
            justify-content: space-around;
            align-items: start;
            margin-top: 0.2rem;
            color: #f5ebc4;
            .user-box {
                display: flex;
            }
            .user {
                background: #000;
                width: 0.4rem;
                height: 0.4rem;
                border-radius: 50%;
                overflow: hidden;
                margin-right: 0.1rem;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}
// 领取后的红包样式
.receive {
    height: 2.2rem;
    background-color: #d9554c;
}
.red_title {
    margin-top: 0.3rem;
    font-size: 0.25rem;
    color: #f1e89c;
    text-align: center;
}
.person-number-cwrap {
    display: -webkit-flex;
    display: flex;
    position: relative;
    height: 2.2rem;
    padding-top: 1.32rem;
    width: 100%;
    overflow: auto;
    -webkit-justify-content: center;
    justify-content: center;
}
.person-number-wwrap {
    overflow: hidden;
    width: 100%;
    height: 2.1rem;
}
.person-number {
    position: relative;
    padding-left: 0.25rem;
    height: 0.22rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-flex: 1;
    flex: 1;
    padding-right: 0.15rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    white-space: nowrap;
}
.arrive-point {
    width: 2.17rem;
    position: relative;
    left: 0;
    right: 0;
    margin: auto;
}
.arrive-point {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.red-wcricle {
    display: inline-block;
    width: 0.1rem;
    height: 0.1rem;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: #d94b43;
    position: relative;
    .red-cricle {
        display: inline-block;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
        width: 0.06rem;
        height: 0.06rem;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        background-color: #ffe100;
        z-index: 2;
    }
}
.red-money {
    position: absolute;
    top: 0.3rem;
    left: 0;
    color: #f2e991;
    font-size: 0.34rem;
    width: 100%;
    text-align: center;
}
.red-wline {
    display: inline-block;
    width: 50%;
    height: 0.05rem;
    background-color: #d94b43;
    position: relative;
    margin: 0 -0.03rem;
    .red-line {
        height: 0.02rem;
        background-color: #ffe100;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        z-index: 1;
    }
}
.user-header-list {
    width: 0.22rem;
    height: 0.22rem;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.user-headers {
    width: 0.15rem;
    display: inline-block;
}
.userheaders-right {
    padding-left: 0.13rem;
    font-size: 0.11rem;
    color: #fff;
    white-space: nowrap;
    position: relative;
    top: -6px;
}
.userheaders-bottom-text {
    font-size: 0.11rem;
    color: #fff;
}
.person-only-one {
    text-align: center;
    min-width: 20%;
}
.userheaders-one-line {
    display: block;
    text-align: center;
}
.red-cricle-text {
    position: absolute;
    top: 0.15rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    text-align: center;
    color: #fff;
    font-size: 0.12rem;
    width: 1rem;
}
.red-wradius {
    position: absolute;
    height: 0.5rem;
    left: 0;
    bottom: 0;
    width: 100%;
    overflow: hidden;
    background-color: #de4d46;
    margin-top: 0.75rem;
}
.red-radius {
    position: absolute;
    left: 0;
    top: -0.45rem;
    width: 100%;
    height: 0.9rem;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: #e95149;
    -webkit-box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.2);
}
.red-bottom-part {
    height: 1.1rem;
    position: absolute;
    bottom: 0.7rem;
    left: 50%;
    transform: translateX(-50%);
}
// 优惠卷领取后的样式
.coupons-code-active {
    color: #c4c6cc !important;
}
// 领取后样式
.red-bottom-part-receive {
    background: url(../../../assets/images/redEnvelope/bg-red.png) no-repeat
        center center/cover;
    height: 2.4rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 999;
    .coupon {
        margin-top: 0.4rem;
        text-align: center;

        .coupon-box {
            position: relative;
            margin: 0.1rem auto;
            display: flex;
            justify-content: space-around;
            align-items: center;
            font-size: 0.12rem;
            background: #fff;
            border-radius: 8px;
            width: 2.8rem;
            .icon-status {
                position: absolute;
                top: 0;
                right: 0.32rem;
                width: 0.6rem;
                height: 0.45rem;
                img {
                    width: 100%;
                }
            }
            .icon {
                width: 0.48rem;
                height: 0.48rem;
                background: #ccc;
            }
            .text1 {
                // padding: 0.21rem 0;
                p {
                    &:nth-child(1) {
                        padding-bottom: 0.05rem;
                    }
                    &:nth-child(2) {
                        color: #666;
                    }
                }
            }
            .text2 {
                p {
                    &:nth-child(1) {
                        padding-bottom: 0.05rem;
                        color: #f25f55;
                    }
                }
            }
            .but {
                color: #666;
                display: flex;
                flex-direction: column;
                border-left: dashed 1px #ccc;
                // padding: 0 0.08rem;
                padding-left: 0.07rem;
            }
        }
    }
}
.red-big-btn {
    width: 1rem;
    height: 1rem;
    background-color: #ebde76;
    -webkit-box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    color: #dd564f;
    left: 0;
    right: 0;
    margin: auto;
    position: relative;
}
.red-big-btn.disabled {
    background-color: #ebdf75;
    color: #d9ce6c;
}
.red-big-btn.active {
    -webkit-animation: activeBtn 1.5s infinite;
    -o-animation: activeBtn 1.5s infinite;
    animation: activeBtn 1.5s infinite;
}
@keyframes activeBtn {
    0% {
        -webkit-transform: rotate3d(0, 180, 0, 0deg);
        transform: rotate3d(0, 180, 0, 0deg);
    }
    100% {
        -webkit-transform: rotate3d(0, 180, 0, 360deg);
        transform: rotate3d(0, 180, 0, 360deg);
    }
}
.red-big-cbtn {
    text-align: center;
    font-size: 0.15rem;
}
.red-wclock {
    color: #fff;
    font-size: 0.13rem;
    text-align: center;
    padding-top: 0.2rem;
    letter-spacing: 1px;
    .red-clock {
        width: 0.12rem;
        position: relative;
        top: 1px;
    }
}
.bigFont {
    font-size: 0.45rem;
    color: #d9554c;
}
.red-show-wget-money {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 2.66rem;
    height: 2.28rem;
    z-index: 1050;
    .red-show-cget-money {
        position: relative;
    }
    .red-get-wmoney {
        position: absolute;
        top: 0.59rem;
        text-align: center;
        width: 100%;
        font-size: 0.36rem;
        color: #d94545;
        z-index: 3;
        .money-icon {
            font-size: 0.24rem;
            position: absolute;
            left: -0.25rem;
            bottom: 0;
        }
    }
    .red-get-money-img {
        width: 2.66rem;
        position: relative;
        z-index: 2;
    }
    .red-app-des {
        font-size: 0.15rem;
        color: #fff;
        position: absolute;
        bottom: 0.23rem;
        width: 100%;
        text-align: center;
        z-index: 3;
    }
    .red-cash-btn {
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        bottom: -1rem;
        z-index: 3;
        background-color: #e74a4a;
        font-size: 0.17rem;
        border-radius: 0.25rem;
        height: 0.5rem;
        line-height: 0.5rem;
        width: 2rem;
        text-align: center;
        color: #fff;
        letter-spacing: 0.02rem;
    }
    .red-bg-light {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        margin: auto;
        width: 130%;
    }
    .red-bg-light.rotate {
        -webkit-animation: lightRotate 5s infinite linear;
        -o-animation: lightRotate 5s infinite linear;
        animation: lightRotate 5s infinite linear;
    }
}
.red-get-money-text {
    display: inline-block;
    width: 1.3rem;
    height: 0.32rem;
    line-height: 0.32rem;
    font-size: 0.14rem;
    color: #fff;
    border: 1px solid #fff;
    text-align: center;
    .icon-arrows_right {
        font-size: 0.08rem;
        color: #fff;
        width: 0.08rem;
    }
}
@keyframes lightRotate {
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
        -moz-transform: translate(-50%, -50%) rotate(0deg);
        -ms-transform: translate(-50%, -50%) rotate(0deg);
        -o-transform: translate(-50%, -50%) rotate(0deg);
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        -moz-transform: translate(-50%, -50%) rotate(360deg);
        -ms-transform: translate(-50%, -50%) rotate(360deg);
        -o-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
.animated.zoomIn,
.animated.zoomOut {
    -webkit-animation-duration: 300ms;
    animation-duration: 300ms; // 动画执行时间
}

/*.get-red-hide{*/
/*display: none;*/
/*}*/
.icon-close {
    color: #f0e89c;
    background: rgba(0, 0, 0, 0.8);
    font-size: 0.16rem;
    position: absolute;
    left: 50%;
    margin-left: -0.16rem;
    bottom: -0.4rem;
    border-radius: 50%;
    display: inline-block;
    min-height: 0.32rem;
    min-width: 0.32rem;
    line-height: 0.32rem;
    z-index: 9999;
    text-align: center;
}
.red-wget-money {
    margin-top: 0.25rem;
}
.gold-icon {
    width: 0.3rem;
    height: 0.3rem;
    position: absolute;
    left: 1.05rem;
    bottom: 0;
    margin: auto;
}
.gold-icon.active {
    /*-webkit-animation: goldIconActive .5s;*/
    /*-o-animation: goldIconActive .5s;*/
    /*animation: goldIconActive .5s linear;*/
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
.red-wx-icon-des {
    color: #fff;
    text-align: center;
    font-size: 0.12rem;
    line-height: 0.3rem;
}
.red-wx-icon {
    width: 0.41rem;
}
/* @keyframes goldIconActive {
        0%{
            left: 1.05rem;
            bottom: 0;
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -ms-transform: scale(1);
            -o-transform: scale(1);
            transform: scale(1);
        }
    }

    @keyframes lightRotate {
        0% {
            -webkit-transform: translate(-50%, -50%) rotate(0deg);
            -moz-transform: translate(-50%, -50%) rotate(0deg);
            -ms-transform: translate(-50%, -50%) rotate(0deg);
            -o-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
        }
        100% {
            -webkit-transform: translate(-50%, -50%) rotate(360deg);
            -moz-transform: translate(-50%, -50%) rotate(360deg);
            -ms-transform: translate(-50%, -50%) rotate(360deg);
            -o-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
        }
    }

    .animated.zoomIn,
    .animated.zoomOut {
        -webkit-animation-duration: 300ms;
        animation-duration: 300ms; // 动画执行时间
    }

    /*.get-red-hide{*/
/*display: none;*/
/*}*/
.icon-close {
    color: #f0e89c;
    background: rgba(0, 0, 0, 0.2);
    font-size: 0.16rem;
    position: absolute;
    left: 50%;
    margin-left: -0.16rem;
    bottom: -0.4rem;
    border-radius: 50%;
    display: inline-block;
    min-height: 0.32rem;
    min-width: 0.32rem;
    line-height: 0.32rem;
    z-index: 9999;
    text-align: center;
}

.red-wget-money {
    margin-top: 0.25rem;
}

.gold-icon {
    width: 0.3rem;
    height: 0.3rem;
    position: absolute;
    left: 1.05rem;
    bottom: 0;
    margin: auto;
}

.gold-icon.active {
    /*-webkit-animation: goldIconActive .5s;*/
    /*-o-animation: goldIconActive .5s;*/
    /*animation: goldIconActive .5s linear;*/
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}

.red-wx-icon-des {
    color: #fff;
    text-align: center;
    font-size: 0.12rem;
    line-height: 0.3rem;
}

.red-wx-icon {
    width: 0.41rem;
}

/* @keyframes goldIconActive {
            0%{
                left: 1.05rem;
                bottom: 0;
                -webkit-transform: scale(1);
                -moz-transform: scale(1);
                -ms-transform: scale(1);
                -o-transform: scale(1);
                transform: scale(1);
            }
            100%{
                left: 3.05rem;
                bottom: -3rem;
                display: none;
                -webkit-transform: scale(.1);
                -moz-transform: scale(.1);
                -ms-transform: scale(.1);
                -o-transform: scale(.1);
                transform: scale(.1);
            }
        }*/
</style>
